<template>
  <div>
   <el-form :inline="true" :mode="queryParams">
    <section class="justify-align">
      <div>
        <el-form-item>
          <el-button v-if="checkAuthority('/equipment/add')" type="primary" @click="handleAdd">新增中间件设备</el-button>
        </el-form-item>
      </div>
      <div>
        <el-form-item>
          <el-select clearable filterable
          v-model="queryParams.eqptTypeId"
          @change="changeOneType"
          placeholder="全部一级类型">
          <el-option
            v-for="item in deviceOneTypeList"
            :key="item.typeId"
            :label="item.typeName"
            :value="item.typeId"
          ></el-option>
          </el-select>
        </el-form-item>
        <!-- 二级类型 -->
        <el-form-item>
          <el-select clearable filterable v-model="queryParams.twoLevelEqptTypeId" placeholder="全部二级类型">
          <el-option
            v-for="item in deviceTwoTypeList"
            :key="item.typeId"
            :label="item.typeName"
            :value="item.typeId"
          ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-input clearable placeholder="请输入设备名称" v-model="queryParams.eqptName"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">查询</el-button>
        </el-form-item>
      </div>
    </section>
   </el-form>
   <el-table :data="tableData" style="width: 100%">
    <el-table-column type="index" label="序号" width="80" prop="index">
      <template slot-scope="scope">
        {{ queryParams.pageSize * (queryParams.current - 1) + scope.$index + 1 }}
      </template>
    </el-table-column>
    <el-table-column prop="sourceId" label="设备编号"></el-table-column>
    <el-table-column prop="eqptName" label="设备名称"></el-table-column>
    <el-table-column prop="relationEqpt" label="组装设备">
      <template #default="{ row }">
        <ul v-for="(item, index) in row.relationEqpt" :key="index">
          <el-tooltip effect="dark" :content="item" placement="bottom">
            <div class="ellipsis">{{ item }}</div>
          </el-tooltip>
        </ul>
      </template>
    </el-table-column>
    <el-table-column prop="firstLevelName" label="设备类型一级"></el-table-column>
    <el-table-column prop="secondLevelName" label="设备类型二级"></el-table-column>
    <el-table-column prop="supplierName" label="供应商"></el-table-column>
    <el-table-column prop="eqptAdress" label="地点"></el-table-column>
    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button v-if="checkAuthority('/select')" type="text" size="small" @click="handleDetail(scope.row)">查看</el-button>
        <el-button v-if="checkAuthority('/equiment/editor')" type="text" size="small" @click="handleEdit(scope.row)">编辑</el-button>
        <el-button v-if="checkAuthority('/equiment/delete')" type="text" size="small" @click="handleRemove(scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination
    v-if="tableData.length > 0"
    style="text-align: right"
    layout="total, prev, pager, next"
    @current-change="pageHandleChange"
    :current-page="queryParams.current"
    :page-size="queryParams.pageSize"
    :total="totalPageNum"
  ></el-pagination>
  <middleware-modal
    v-if="middlewareObj.show"
    :middlewareObj="middlewareObj"
    :deviceOneTypeList="deviceOneTypeList"
    @ok="handleOk"
    @close="handleClose"
  />
  </div>
</template>

<script>
import MiddlewareModal from './MiddlewareModal'
import {
  getDeviceTypeList,
  queryMiddleEqptData,
  addMiddleEqptData,
  deleteMiddleEqpt,
  updateMiddleEqptData
} from '@/views/children/safety/js/device'
import { checkAuthority } from '@/utils/btnPermission' // 页面按钮权限

export default {
  components: {
    MiddlewareModal
  },
  data: () => ({
    queryParams: {
      current: 1,
      pageSize: 10,
      eqptTypeId: '',
      twoLevelEqptTypeId: '',
      eqptName: ''
    },
    deviceOneTypeList: [],
    deviceTwoTypeList: [],
    totalPageNum: 0,
    tableData: [],
    middlewareObj: {
      title: '新增中间件设备',
      show: false,
      row: {}
    }
  }),
  methods: {
    checkAuthority,
    handleSearch () {
      this.queryParams.current = 1
      this.getTableData()
    },
    pageHandleChange (page) {
      this.queryParams.current = page
      this.getTableData()
    },
    async handleOk (obj) {
      try {
        if (this.middlewareObj.title === '新增中间件设备') {
          const res = await addMiddleEqptData({
            ...obj
          })
          if (res.code === 0) {
            this.handleClose()
            this.handleSearch()
            this.$message.success('新增中间件设备成功')
          }
        } else if (this.middlewareObj.title === '编辑中间件设备') {
          const {
            areaTree,
            eqptName,
            eqptTypeId,
            middleEqptId,
            relationTree,
            sourceId,
            supplierName
          } = obj
          const res = await updateMiddleEqptData({
            areaTree,
            eqptName,
            eqptTypeId,
            middleEqptId,
            relationTree,
            sourceId,
            supplierName
          })
          if (res.code === 0) {
            this.handleClose()
            this.getTableData()
            this.$message.success('编辑中间件设备成功')
          }
        }
      } catch (e) {}
    },
    handleClose () {
      this.middlewareObj.show = false
    },
    handleDetail (row) {
      // 查看
      this.middlewareObj.title = '查看中间件设备'
      this.middlewareObj.show = true
      this.middlewareObj.row = row
    },
    handleAdd () {
      // 新增
      this.middlewareObj.title = '新增中间件设备'
      this.middlewareObj.show = true
      this.middlewareObj.row = {}
    },
    handleEdit (row) {
      // 编辑
      this.middlewareObj.title = '编辑中间件设备'
      this.middlewareObj.show = true
      this.middlewareObj.row = row
    },
    handleRemove (row) {
      // 行内删除
      this.$confirm('确定删除该中间件设备吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        let result = await deleteMiddleEqpt(row.middleEqptId)
        if (result.code === 0) {
          this.getTableData()
          this.$message.success('删除成功！')
        } else {
          this.$message.error('删除失败！')
        }
      })
    },
    async getTableData () {
      // 获取列表数据
      try {
        const res = await queryMiddleEqptData({
          ...this.queryParams
        })
        if (res.code === 0) {
          this.tableData = res.data.records
          this.totalPageNum = res.data.total
        }
      } catch (e) {}
    },
    // 获取设备一级类型下拉列表数据
    async getDeviceTypeList () {
      try {
        const params = {
          typeLevel: 1, // 类型名称
          typeParentId: '' // 父类型id
        }
        let res = await getDeviceTypeList(params)
        if (res.code === 0) {
          this.deviceOneTypeList = res.data
        } else {
          this.$message.warning(res.msg)
        }
      } catch (e) {}
    },
    // 获取设备二级类型下拉框数据
    async changeOneType (val) {
      try {
        const params = {
          typeLevel: 2, // 类型名称
          typeParentId: val // 父类型id
        }
        let res = await getDeviceTypeList(params)
        if (res.code === 0) {
          this.queryParams.twoLevelEqptTypeId = ''
          this.deviceTwoTypeList = res.data
        }
      } catch (e) {}
    }
  },
  mounted () {
    this.getDeviceTypeList()
    this.handleSearch()
  }
}
</script>

<style lang="scss" scoped>
.ellipsis {
  width: 100px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 1;
}
</style>
